<template>
  <div class="leaderboard-list">
    <div v-if="loading" class="loading-container">
      <van-loading type="spinner" color="#1989fa" />
      <span>加载中...</span>
    </div>
    
    <div v-else-if="list.length === 0" class="empty-container">
      <van-empty description="暂无排行数据" />
    </div>
    
    <div v-else class="list-container">
      <div class="list-header">
        <div class="col-rank">排名</div>
        <div class="col-user">用户</div>
        <div class="col-time">用时</div>
        <div class="col-date">日期</div>
      </div>
      
      <div class="list-body">
        <div 
          v-for="(item, index) in list" 
          :key="item.id" 
          class="list-item"
          :class="{ 'top-three': index < 3 }"
        >
          <div class="col-rank">
            <span class="rank-number" :class="'rank-' + (index + 1)">{{ index + 1 }}</span>
          </div>
          <div class="col-user">{{ item.username }}</div>
          <div class="col-time">{{ formatTime(item.time) }}</div>
          <div class="col-date">{{ formatDate(item.date) }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  level: {
    type: String,
    required: true
  },
  list: {
    type: Array,
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  }
});

// 格式化时间
const formatTime = (seconds) => {
  if (!seconds) return '--:--';
  
  const minutes = Math.floor(seconds / 60);
  const remainingSeconds = seconds % 60;
  
  return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
};

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return '';
  
  const date = new Date(dateString);
  return date.toLocaleDateString('zh-CN', { 
    month: '2-digit', 
    day: '2-digit' 
  });
};
</script>

<style scoped>
.leaderboard-list {
  padding: 10px 0;
}

.loading-container, .empty-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 200px;
  color: #969799;
}

.loading-container span {
  margin-top: 10px;
}

.list-container {
  margin: 0 15px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(100, 101, 102, 0.08);
}

.list-header {
  display: flex;
  padding: 10px 15px;
  background-color: #f7f8fa;
  font-weight: bold;
  color: #323233;
  font-size: 14px;
  border-bottom: 1px solid #ebedf0;
}

.list-item {
  display: flex;
  padding: 12px 15px;
  border-bottom: 1px solid #ebedf0;
}

.list-item:last-child {
  border-bottom: none;
}

.top-three {
  background-color: #f0f9ff;
}

.col-rank {
  width: 60px;
  display: flex;
  align-items: center;
}

.col-user {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.col-time {
  width: 70px;
  text-align: right;
}

.col-date {
  width: 60px;
  text-align: right;
}

.rank-number {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-weight: bold;
}

.rank-1 {
  background-color: #FFD700;
  color: #fff;
}

.rank-2 {
  background-color: #C0C0C0;
  color: #fff;
}

.rank-3 {
  background-color: #CD7F32;
  color: #fff;
}
</style>
